<template>
    <div class="searchList">
         <!-- 顶部 -->
       <div class="addressHeader">
            <!-- <router-link  to="/userInfo" class="header-left vip-icon icon-back" tag="div"></router-link> -->
             <div @click="$router.go(-1)" class="header-left vip-icon icon-back"></div>
            <router-link to="search" tag="div" class="header-middle">
                <input type="text" v-model="text">
            </router-link>
            <router-link to="/home" tag="div" class="header-right vip-icon icon-home"></router-link>
       </div>

        <!-- 收货地址为零 显示 -->
         <van-empty description="没有搜索到该商品喔" v-if="this.productSearch().length == 0" />
          <!-- 折扣价格排序 -->
        <div class="sticky-box-container" v-if="this.productSearch().length > 0">
            <ul>
                <li>
                    <div @click="priceClick" :class="{'selected':priceIndex == 1 || priceIndex == 11 }">价格</div>
                    <i :class="[{'price-up':priceIndex == 1},{'price-down':priceIndex == 11}]"></i>
                </li>
                <li>
                    <div @click="discountClick" :class="{'selected':priceIndex == 2 || priceIndex == 21}">折扣</div>
                    <i :class="[{'price-up':priceIndex == 2},{'price-down':priceIndex == 21}]"></i>
                </li>
            </ul>
        </div>

        <!-- 搜索商品排序 -->
        <div class="list-component" v-if="this.productSearch().length > 0">
            <ul v-if="productArr">
                <li v-for="(item,index) in search()" :key="index">
                    <img :src="item.smallImage" alt="">
                    <div class="price-wrap">
                        <span class="price-item1"><span>特卖价</span></span>
                        <span class="price-item2">￥{{item.price.salePrice}}</span>
                        <span class="price-item3">￥{{item.price.marketPrice}}</span>
                        <span class="price-item4">{{item.price.mixPriceLabel}}</span>
                    </div>
                    <div class="product-name">
                        <span>{{item.title}}</span>
                    </div>
                    <div class="product-item">
                        <span><i>超优独家</i></span>
                    </div>
                </li>
                 
            </ul>
        </div>
    </div>
</template>

<script>
import {getBrand} from "../api/brand.js"
    export default {
        name:"searchListView",
        data() {
            return {
              searchList:[],  //存放历史搜索的值
              priceIndex:0,  //价格 折扣切换
              productArr:[],  //商品数组
            //   brandList:null,   //空数组
              text:"" //输入框的值
            };
        },
        methods:{
            // 调用json数据
            getBrandFun(){
                getBrand().then(data => {
                    // console.log(data);
                    this.productArr = data.data.products;
                    // console.log(this.productArr);
                })
            },
            // 价格的点击事件
            priceClick(){
                
                if(this.priceIndex == 0){
                    this.priceIndex = 1;
                }else if(this.priceIndex == 1){
                    this.priceIndex = 11;
                }else if(this.priceIndex == 11){
                    this.priceIndex = 0;
                }
            },
            // 折扣点击事件
            discountClick(){
                if(this.priceIndex == 0){
                   this.priceIndex = 2;
                }else if(this.priceIndex == 2){
                    this.priceIndex = 21;
                }else if(this.priceIndex == 21){
                    this.priceIndex = 0;
                }
            },
            // 筛选关键字
            productSearch(){
                //实现深拷贝
                // this.newArr = JSON.parse(JSON.stringify(this.productArr));
                return this.productArr.filter(item => item.title.includes(this.text));
                // var newA = [];
            //     this.productArr.forEach(item=>{
            //        if(item.title.indexOf(this.text) != -1){ //存在关键字
            //            newA.push(item);
            //        }
            //     })
                
            //   return newA;
            },
              search(){
            var brandList = JSON.parse(JSON.stringify(this.productSearch()));
                if(this.priceIndex == 0){
                    return this.productSearch();
                }else if(this.priceIndex == 1){
                    // 价格从小到大排序
                    for(let i = 0; i < brandList.length - 1 ; i++ ){
                        for(let j = 0; j < brandList.length - 1 - i; j++ ){
                            if( parseInt(brandList[j].price.salePrice) > parseInt(brandList[j+1].price.salePrice) ){// 如果brandList[j]比brandList[j+1]大,则需要交换位置
                                // 交换两个变量的值
                                let temp = brandList[j+1];
                                brandList[j+1] = brandList[j];
                                brandList[j] = temp;
                            }
                        }
                    }
                    return brandList;

                }else if(this.priceIndex == 11){
                    // 价格从大到小排序
                    for(let i = 0; i < brandList.length - 1 ; i++ ){
                        for(let j = 0; j < brandList.length - 1 - i; j++ ){
                            if( parseInt(brandList[j].price.salePrice) < parseInt(brandList[j+1].price.salePrice) ){// 如果brandList[j]比brandList[j+1]大,则需要交换位置
                                // 交换两个变量的值
                                let temp = brandList[j+1];
                                brandList[j+1] = brandList[j];
                                brandList[j] = temp;
                            }
                        }
                    }
                    return brandList;

                }else if(this.priceIndex == 2){
                      // 折扣从小到大排序
                    for(let i = 0; i < brandList.length - 1 ; i++ ){
                        for(let j = 0; j < brandList.length - 1 - i; j++ ){
                            if( parseInt(brandList[j].price.saleDiscount) > parseInt(brandList[j+1].price.saleDiscount) ){// 如果brandList[j]比brandList[j+1]大,则需要交换位置
                                // 交换两个变量的值
                                let temp = brandList[j+1];
                                brandList[j+1] = brandList[j];
                                brandList[j] = temp;
                            }
                        }
                    }
                    return brandList;

                }else if(this.priceIndex == 21){
                       // 折扣从大到小排序
                    for(let i = 0; i < brandList.length - 1 ; i++ ){
                        for(let j = 0; j < brandList.length - 1 - i; j++ ){
                            if( parseInt(brandList[j].price.saleDiscount) < parseInt(brandList[j+1].price.saleDiscount) ){// 如果brandList[j]比brandList[j+1]大,则需要交换位置
                                // 交换两个变量的值
                                let temp = brandList[j+1];
                                brandList[j+1] = brandList[j];
                                brandList[j] = temp;
                            }
                        }
                    }
                    return brandList;
                }
            },
        },
        created(){
             // 获取的商品数据
            this.getBrandFun();
            // 初始化历史搜索的值
            if(window.localStorage.getItem("history")){
                this.searchList = JSON.parse(window.localStorage.getItem("history"));

                var textName = this.$route.query.name;
                this.text = this.$route.query.name;
                var index = this.searchList.findIndex(item => item == textName);
                if(index == -1){
                    this.searchList.push(textName);
                    window.localStorage.setItem("history",JSON.stringify(this.searchList))
                }
            } 
            
        },
       
        updated(){
            // console.log(this.productArr.length);
            // console.log(this.productSearch().length);
        }
        
        
    }
</script>

<style lang="scss" scoped>
.searchList{
    background-color: #f3f4f5;
    height: 100%;
    .addressHeader{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
        background-color: #fff;
        .header-left{
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size: 26px;
        }

        .header-middle{
            flex: 1;
            width: 285px;
            height: 44px;
            padding: 6px 0 6px;
            box-sizing: border-box;
            input{
                    outline: none;
                    border: none;
                    flex: 1;
                    box-sizing: border-box;
                    padding-left: 8px;
                    display: block;
                    width: 100%;
                    height: 30px;
                    background-color: #f3f4f5;
                    border-radius: 15px;
                    overflow: hidden;
                }
        }
        
        .header-right{
            font-size: 20px;
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
        }
    }

    .sticky-box-container{
        position: sticky;
        top: 0;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        ul{
            width:100% ;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            background-color: #fff;
            li{
                width: 50%;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                div{
                    font-size: 14px;
                    color: #585c64;
                    &.selected{
                        color: #f03b67;
                    }
                }
                i{
                    width: 10px;
                    height: 10px;
                    margin-left: 6px;
                    background: url("../assets/image/price1.png")no-repeat 0 0/cover;

                    &.price-up{
                        background-image: url("../assets/image/price2.png");
                    }
                    &.price-down{
                        background-image: url("../assets/image/price3.png");
                    }
                }
            }
        }
    }
    .list-component{
        display: flex;
        width: 100%;
        ul{
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 5px;
            li{
                margin-top: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 333px;
                width: 180px;
                background-color: #fff;
                border-radius: 6px;
                overflow: hidden;
                img{
                    width: 178px;
                }
                .price-wrap{
                    margin: 6px 9px 0;
                    height: 23px;
                    padding-top: 4px;
                    box-sizing: border-box;
                    width: 160px;
                    display: flex;
                    align-items: flex-end;
                    .price-item1{
                        width: 44px;
                        height: 15px;
                        background-color: #f03b67;
                        text-align: center;
                        span{
                            color: #fff;
                            text-align: center;
                            line-height: 15px;
                            transform: scale(0.9);
                        }
                    }
                    .price-item2{
                        font-size: 14px;
                        font-weight: bold;
                        color: #232323;
                    }
                    .price-item3,.price-item4{
                        font-size: 12px;
                        color: #98989f;
                        transform: scale(0.9);
                        text-decoration: line-through;
                        margin-left: 3px;
                    }
                }
                .product-name{
                    margin: 10px 9px 0;
                    span{
                        color: #585c64;
                        font-size: 14px;
                        line-height: 16px;
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        height: 32px;
                    }
                }
                .product-item{
                    width: 100%;
                    margin: 8px 9px 0;
                    height: 20px;
                    display:flex;
                    align-items: center;
                    span{
                        margin-left:8px ;
                        border-radius: 3px;
                        width: 56px;
                        height: 15px;
                        background-color: #fde7ed;
                        color: #f0387d;
                        font-size: 12px;
                        text-align: center;
                        line-height: 15px;
                        i{
                            display: inline-block;
                            transform: scale(0.9);
                        }
                    }
                }

            }
        }
    }
}
</style>